<template>
  <div :class="'pagination ' + { hidden: hidden }">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :background="background"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {defineProps, defineEmits, ref, watch} from 'vue'

const props = defineProps({
  total: {
    required: true,
    type: Number,
    default: 0,
  },
  page: {
    type: Number,
    default: 1,
  },
  limit: {
    type: Number,
    default: 20,
  },
  pageSizes: {
    type: Array,
    default() {
      return [10, 20, 30, 50, 100]
    },
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper',
  },
  background: {
    type: Boolean,
    default: true,
  },
  autoScroll: {
    type: Boolean,
    default: true,
  },
  hidden: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['pagination', 'update:page', 'update:limit'])
const currentPage = ref(props.page)
const pageSize = ref(props.limit)
watch(props, (nv,  ov) => {
  currentPage.value = props.page
  pageSize.value = props.limit
})

function handleSizeChange(val) {
  emit('update:limit', pageSize.value)
  emit('pagination', { page: currentPage, limit: val })
}

function handleCurrentChange(val) {
  currentPage.value = val
  emit('update:page', val)
  emit('pagination', { page: val, limit: props.limit })
}
</script>

<style>
/*.pagination {*/
/*  padding: 12px*/

/*  &.hidden {*/
/*    display: none*/
/*  }*/
/*}*/
</style>
